<template>
  <div class="app-container">
    <!-- 表单 -->
    <el-row>
      <el-col :span="9">
        <el-form label-width="80px" label-position="right">
          <el-form-item label="模板文件">
            <el-button plain disabled size="medium" type="info" style="margin-right: 10px">科目分类模板文件.xlsx</el-button>
            <a :href="excelTemplate">
              <el-button size="medium" type="success">
                <svg-icon icon-class="download"/>
                点击下载
              </el-button>
            </a>
          </el-form-item>
          <el-form-item label="选择文件" style="width: 440px">
            <el-upload
              :auto-upload="false"
              :on-exceed="fileExceed"
              :on-remove="fileRemove"
              :on-change="fileChange"
              :on-success="fileUploadSuccess"
              :on-error="fileUploadError"
              :limit="1"
              drag
              ref="upload"
              name="file"
              action="http://localhost:7671/admin/edu/subjects/"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
          </el-form-item>
          <el-form-item label="导入科目">
            <el-button
              :disabled="importBtnDisabled"
              size="medium"
              type="primary"
              @click="submitUpload()"
            >
              <svg-icon icon-class="upload"/>
              导入
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <!-- 使用教程 -->
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>使用教程</span>
            <el-button class="nextBtn" v-if="active === 5" type="text" @click="next">完成</el-button>
            <el-button class="nextBtn" v-else type="text" @click="next">下一步</el-button>
          </div>
          <el-steps :space="60" :active="active" direction="vertical">
            <el-step title="下载" description="下载模板Excel"></el-step>
            <el-step title="编辑" description="在本地编辑一级科目与二级科目"></el-step>
            <el-step title="保存" description="记得保存文件"></el-step>
            <el-step title="选择" description="选择刚刚编辑的Excel"></el-step>
            <el-step title="导入" description="点击导入"></el-step>
          </el-steps>
        </el-card>
      </el-col>
      <el-col></el-col>
    </el-row>
  </div>
</template>


<script>

export default {
  // 定义数据模型
  data() {
    return {
      excelTemplate: process.env.VUE_APP_OSS_PATH + '/excel/科目分类模板文件.xlsx', // 默认excel模板
      importBtnDisabled: true, // 导入按钮是否禁用
      active: 0, // 步骤条默认激活选项
      uploadState: false // 上传成功或失败标记
    }
  },
  // 定义方法
  methods: {
    // 选择文件超出范围时
    fileExceed() {
      this.$message.warning('只能选择一个文件')
    },
    // 文件删除时
    fileRemove() {
      // 禁用导入按钮
      this.importBtnDisabled = true
    },
    // 添加文件, 上传成功, 上传失败时
    fileChange(file) {
      // 上传成功或失败
      if (this.uploadState) {
        // 清空文件列表
        this.$refs.upload.clearFiles()
        this.uploadState = false
      } else {
        // 判断文件类型
        const isXLSX = file.name.substring(file.name.lastIndexOf('.') + 1) === 'xlsx'
        if (!isXLSX) {
          this.$message.warning('文件只能是 xlsx 格式')
        } else {
          // 启用导入按钮
          this.importBtnDisabled = false
        }
      }
    },
    // 上传文件
    submitUpload() {
      // 禁用导入按钮
      this.importBtnDisabled = true
      // 提交上传请求
      this.$refs.upload.submit()
    },
    // 上传成功
    fileUploadSuccess(response) {
      this.uploadState = true
      if (response.success) {
        this.$message.success(response.message)
      } else {
        this.$message.error('批量导入课程失败（非HTTP错误）')
      }
    },
    // 上传失败
    fileUploadError() {
      this.uploadState = true
      this.$message.error('批量导入课程失败（HTTP错误）')
    },
    // 下一步
    next() {
      if (this.active++ > 4) this.active = 0
      console.log(this.active)
    }
  }
}
</script>

<style lang="scss">
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.nextBtn {
  float: right;
  padding: 3px 0
}

.el-card__body {
  padding-bottom: 5px;
}
</style>
